<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header-nav">
			<view class="nav-left" @click="goBack">
				<text class="nav-text">返回</text>
			</view>
			<view class="nav-center">
				<view class="title">项目详情</view>
				<view class="title-line"></view>
			</view>
			<view class="nav-right">
				<text class="nav-text" @click="share">分享</text>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<scroll-view scroll-y="true" class="content-scroll">
			<!-- 项目标题区域 -->
			<view class="title-section">
				<view class="main-title">{{detailInfo.title}}</view>
				<view class="title-tags" v-if="detailInfo.tags && detailInfo.tags.length">
					<view class="tag" v-for="(tag, index) in detailInfo.tags" :key="index">{{tag}}</view>
				</view>
			</view>

			<!-- 免责声明 -->
			<view class="disclaimer-section">
				<view class="disclaimer-icon">
					<text class="icon-warning">!</text>
				</view>
				<view class="disclaimer-content">
					注意！此订单任何情况下都不退款，请知悉，所有图片和文字仅供参考，不保证连续性，不做任何承诺，自愿付费，谨慎下单！
				</view>
			</view>

			<!-- 历史战绩 -->
			<view class="history-section">
				<view class="section-title">
					<text class="title-text">历史战绩</text>
				</view>
				<view class="history-list">
					<view class="history-item" v-for="(item, index) in detailInfo.history" :key="index">
						<view class="history-time">{{item.time}}</view>
						<view class="history-desc">{{item.desc}}</view>
						<view class="history-result" :class="{'win': item.isWin}">
							{{item.isWin ? '中奖' : '未中'}}
						</view>
					</view>
				</view>
			</view>

			<!-- 详细分析 -->
			<view class="analysis-section">
				<view class="section-title" @click="toggleAnalysis">
					<text class="title-text">详细分析</text>
					<view class="toggle-icon">
						<text :class="isAnalysisExpanded ? 'icon-up' : 'icon-down'">{{isAnalysisExpanded ? '收起' : '展开'}}</text>
						<text class="icon-arrow" :class="{'icon-arrow-up': isAnalysisExpanded, 'icon-arrow-down': !isAnalysisExpanded}"></text>
					</view>
				</view>
				<view class="analysis-content" :class="{'content-collapsed': !isAnalysisExpanded}">
					<rich-text :nodes="detailInfo.content"></rich-text>
					<view v-if="!isAnalysisExpanded && shouldShowEllipsis" class="ellipsis">...</view>
				</view>
			</view>

			<!-- 作者信息 -->
			<view class="author-section" v-if="detailInfo.expertId">
				<view class="author-info">
					<view class="author-avatar">
						<image :src="detailInfo.expertAvatar || '/static/default-avatar.png'"></image>
					</view>
					<view class="author-detail">
						<view class="author-name">{{detailInfo.expertName || '彩票专家'}}</view>
						<view class="author-desc">{{detailInfo.expertDesc || '专业彩票分析师'}}</view>
					</view>
				</view>
				<view class="contact-btn" v-if="showContactBtn" @click="contactAuthor">联系作者</view>
			</view>

			<!-- 底部购买区域 -->
			<view class="bottom-section">
				<view class="price-info">
					<text class="price-label">打赏金额：</text>
					<text class="price-value">¥{{detailInfo.price}}</text>
				</view>
				<button class="buy-btn" @click="handleBuy">立即支持</button>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '../../api/api.js';

	export default {
		data() {
			return {
				detailInfo: {
					title: '',
					tags: [],
					content: '',
					history: [],
					price: 0,
					expertId: '',
					expertName: '',
					expertAvatar: '',
					expertDesc: ''
				},
				isAnalysisExpanded: false,
				contentHeight: 0,
				showContactBtn: false
			}
		},
		computed: {
			shouldShowEllipsis() {
				// 简单判断：如果内容长度超过一定字符数，认为会超过2行
				return this.detailInfo.content && this.detailInfo.content.length > 80;
			}
		},
		onLoad(options) {
			if (options.id) {
				this.getDetailInfo(options.id);
			}
		},
		methods: {
			async getDetailInfo(id) {
				try {
					const res = await api.article.getDetail(id);
					if (res.code === 200) {
						// 处理标签，确保是数组格式
						let tags = [];
						if (res.data.tags) {
							tags = typeof res.data.tags === 'string' 
								? res.data.tags.split(',').filter(tag => tag.trim() !== '')
								: Array.isArray(res.data.tags) ? res.data.tags : [];
						}
						
						this.detailInfo = {
							title: res.data.title || '暂无标题',
							tags: tags,
							content: res.data.content || '',
							history: res.data.history || [],
							price: (res.data.price || 0) / 100,
							expertId: res.data.expertId || '',
							expertName: res.data.expertName || '',
							expertAvatar: res.data.expertAvatar || '',
							expertDesc: res.data.expertDesc || ''
						};
						
						// 获取专家聊天设置
						if (this.detailInfo.expertId) {
							this.checkExpertChatSetting(this.detailInfo.expertId);
						}
					} else {
						uni.showToast({
							title: res.msg || '获取详情失败',
							icon: 'none'
						});
					}
				} catch (err) {
					console.error('获取详情失败', err);
					uni.showToast({
						title: '获取详情失败，请稍后重试',
						icon: 'none'
					});
				}
			},
			async checkExpertChatSetting(expertId) {
				try {
					// 使用正确的API接口检查专家聊天设置
					const baseUrl = uni.$baseUrl || 'http://localhost:8080';
					const token = uni.getStorageSync('loginToken');
					const res = await uni.request({
						url: baseUrl + '/api/chat/check/permission/' + expertId,
						method: 'GET',
						header: {
							'Authorization': `Bearer ${token}`
						}
					});
					
					if (res[1].statusCode === 200 && res[1].data.code === 200) {
						// 根据专家设置显示或隐藏联系按钮
						this.showContactBtn = res[1].data.data.canChat;
					} else {
						// 如果请求失败，默认隐藏联系按钮
						this.showContactBtn = false;
					}
				} catch (err) {
					console.error('获取专家聊天设置失败', err);
					// 出错时隐藏联系按钮
					this.showContactBtn = false;
				}
			},
			contactAuthor() {
				if (!this.detailInfo.expertId) return;
				
				// 获取用户登录状态
				const token = uni.getStorageSync('loginToken');
				if (!token) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return;
				}
				
				// 获取基础URL
				const baseUrl = uni.$baseUrl || 'http://localhost:8080';
				
				// 先检查作者是否允许私聊
				uni.request({
					url: baseUrl + '/api/chat/check/permission/' + this.detailInfo.expertId,
					method: 'GET',
					header: {
						'Authorization': `Bearer ${token}`
					},
					success: (res) => {
						if (res.data.code === 200 && res.data.data.canChat) {
							// 作者允许私聊，尝试创建或获取聊天室
							uni.request({
								url: baseUrl + '/api/chat/start/' + this.detailInfo.expertId,
								method: 'GET',
								header: {
									'Authorization': `Bearer ${token}`
								},
								success: (chatRes) => {
									if (chatRes.data.code === 200) {
										// 跳转到聊天页面
										uni.navigateTo({
											url: `/pages/chat/chat?roomId=${chatRes.data.data.roomId}&roomName=${chatRes.data.data.expertName}&roomType=2`
										});
									} else {
										uni.showToast({
											title: chatRes.data.msg || '联系失败',
											icon: 'none'
										});
									}
								},
								fail: () => {
									uni.showToast({
										title: '联系失败，请稍后重试',
										icon: 'none'
									});
								}
							});
						} else {
							uni.showToast({
								title: '该作者暂不允许私聊',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '检查聊天权限失败',
							icon: 'none'
						});
					}
				});
			},
			toggleAnalysis() {
				this.isAnalysisExpanded = !this.isAnalysisExpanded;
			},
			goBack() {
				uni.navigateBack()
			},
			share() {
				uni.showToast({
					title: '分享功能',
					icon: 'none'
				})
			},
			handleBuy() {
				uni.showToast({
					title: '购买功能',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 20rpx;
		background: linear-gradient(135deg, #FF0000, #FF4D4D);
	}

	.nav-left,
	.nav-right {
		flex: 1;
		height: 60rpx;
		display: flex;
		align-items: center;
	}

	.nav-left {
		padding-left: 10rpx;
	}

	.nav-right {
		padding-right: 10rpx;
		display: flex;
		justify-content: flex-end;
	}

	.nav-text {
		font-size: 28rpx;
		color: #FFFFFF;
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
		background-color: rgba(255, 255, 255, 0.2);
	}

	.nav-center {
		flex: 2;
		text-align: center;
	}

	.title {
		font-size: 38rpx;
		font-weight: bold;
		color: #FFFFFF;
		letter-spacing: 2rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	.title-line {
		width: 100rpx;
		height: 6rpx;
		background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1));
		margin: 8rpx auto 0;
		border-radius: 3rpx;
	}

	.content-scroll {
		height: calc(100vh - 88rpx - 100rpx);
		padding: 20rpx;
		padding-bottom: 160rpx;
		box-sizing: border-box;
		width: 100%;
	}

	.title-section,
	.disclaimer-section,
	.history-section,
	.analysis-section {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(255, 0, 0, 0.1);
		box-sizing: border-box;
		width: 100%;
	}

	.disclaimer-section {
		padding: 20rpx;
		display: flex;
		align-items: flex-start;
		border-left: 8rpx solid #FF9800;
	}

	.disclaimer-icon {
		flex-shrink: 0;
		width: 40rpx;
		height: 40rpx;
		background-color: #FF9800;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		margin-top: 4rpx;
	}

	.icon-warning {
		color: white;
		font-size: 28rpx;
		font-weight: bold;
	}

	.disclaimer-content {
		flex: 1;
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
	}

	.history-section {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(255, 0, 0, 0.1);
	}

	.section-title {
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #FF0000;
		position: relative;
		padding-left: 20rpx;
	}

	.title-text:before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 6rpx;
		height: 30rpx;
		background: linear-gradient(to bottom, #FF0000, #FF4D4D);
		border-radius: 3rpx;
	}

	.toggle-icon {
		font-size: 24rpx;
		color: #FF0000;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		background-color: rgba(255, 0, 0, 0.1);
		display: flex;
		align-items: center;
	}

	.icon-up,
	.icon-down {
		display: inline-block;
		transition: all 0.3s;
	}

	.analysis-content {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
		transition: all 0.3s;
		overflow: hidden;
		background-color: #FFF5F5;
		padding: 20rpx;
		border-radius: 12rpx;
	}

	.content-collapsed {
		max-height: 90rpx; /* 约2行文字的高度 (28rpx * 1.6 * 2) */
		overflow: hidden;
		position: relative;
	}

	.ellipsis {
		position: absolute;
		right: 0;
		bottom: 0;
		background: #FFF5F5;
		padding: 0 10rpx;
		font-weight: bold;
	}

	.history-list {
		background-color: #FFF5F5;
		padding: 20rpx;
		border-radius: 12rpx;
	}

	.history-item {
		display: flex;
		align-items: center;
		padding: 16rpx 0;
		border-bottom: 1rpx solid rgba(255, 0, 0, 0.1);
	}

	.history-item:last-child {
		border-bottom: none;
	}

	.history-time {
		font-size: 24rpx;
		color: #666;
		width: 180rpx;
	}

	.history-desc {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.history-result {
		font-size: 24rpx;
		color: #FF0000;
		padding: 4rpx 16rpx;
		border-radius: 20rpx;
		background-color: rgba(255, 0, 0, 0.1);
	}

	.history-result.win {
		background-color: rgba(0, 200, 0, 0.1);
		color: #00C800;
	}

	.bottom-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 24rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
		z-index: 100;
		border-top: 1rpx solid rgba(255, 0, 0, 0.1);
	}

	.price-info {
		display: flex;
		align-items: baseline;
		flex: 1;
	}

	.price-label {
		font-size: 28rpx;
		color: #666;
	}

	.price-value {
		font-size: 40rpx;
		font-weight: bold;
		color: #FF0000;
	}

	.buy-btn {
		background: linear-gradient(135deg, #FF0000, #FF4D4D);
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
		padding: 12rpx 40rpx;
		border-radius: 36rpx;
		box-shadow: 0 4rpx 12rpx rgba(255, 0, 0, 0.3);
		transition: all 0.3s;
		min-width: 160rpx;
		margin-left: 20rpx;
	}

	.buy-btn:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(255, 0, 0, 0.3);
	}

	.icon-arrow {
		display: inline-block;
		width: 16rpx;
		height: 16rpx;
		border-right: 3rpx solid #FF0000;
		border-bottom: 3rpx solid #FF0000;
		margin-left: 8rpx;
	}

	.icon-arrow-down {
		transform: rotate(45deg);
	}

	.icon-arrow-up {
		transform: rotate(-135deg);
	}

	.main-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.title-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
		margin-bottom: 10rpx;
	}

	.tag {
		font-size: 24rpx;
		color: #FF0000;
		background: linear-gradient(135deg, rgba(255, 0, 0, 0.05), rgba(255, 77, 77, 0.1));
		padding: 6rpx 20rpx;
		border-radius: 30rpx;
		border: 1rpx solid rgba(255, 0, 0, 0.2);
		box-shadow: 0 2rpx 4rpx rgba(255, 0, 0, 0.05);
	}

	.author-section {
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.author-info {
		display: flex;
		align-items: center;
	}
	
	.author-avatar {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
		
		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	
	.author-detail {
		display: flex;
		flex-direction: column;
	}
	
	.author-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}
	
	.author-desc {
		font-size: 24rpx;
		color: #666;
		margin-top: 6rpx;
	}
	
	.contact-btn {
		padding: 12rpx 30rpx;
		background-color: #1296db;
		color: #fff;
		font-size: 26rpx;
		border-radius: 30rpx;
	}
</style> 